<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>张三的个人资料 - Z时代</title>
        <script src="lib/tailwindcss.3.4.16.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
   <style>
        .custom-shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); }
    </style>
</head>
<body class="bg-gray-50 text-gray-900">
    <!-- 顶部导航 -->
    <nav class="fixed top-0 left-0 right-0 bg-white/80 backdrop-blur-md border-b border-gray-200 z-50">
        <div class="max-w-6xl mx-auto px-4">
            <div class="flex items-center justify-between h-16">
                <div class="flex items-center space-x-8">
                    <div class="flex items-center space-x-2">
                        <div class="w-8 h-8 bg-black text-white rounded-full flex items-center justify-center font-bold">Z</div>
                        <span class="text-xl font-bold">时代</span>
                    </div>
                    <div class="hidden md:flex space-x-6">
                        <a href="index.jsp" class="text-gray-600 hover:text-black transition-colors">首页</a>
                        <a href="explore.html" class="text-gray-600 hover:text-black transition-colors">探索</a>
                        <a href="notifications.html" class="text-gray-600 hover:text-black transition-colors">通知</a>
                        <a href="messages.html" class="text-gray-600 hover:text-black transition-colors">消息</a>
                        <a href="profile.html" class="text-gray-600 hover:text-black transition-colors">个人资料</a>
                    </div>
                </div>
                <div class="flex items-center space-x-4">
                    <div class="relative">
                        <input type="text" placeholder="搜索Z时代" 
                               class="w-64 px-4 py-2 bg-gray-100 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <i class="fas fa-search absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500"></i>
                    </div>
                    <a href="login.jsp" class="bg-black text-white px-6 py-2 rounded-full hover:bg-gray-800 transition-colors">登录</a>
                    <a href="register.jsp" class="bg-gray-100 text-gray-900 px-6 py-2 rounded-full hover:bg-gray-200 transition-colors">注册</a>
                    <a href="profile.html" class="w-8 h-8 bg-gray-300 rounded-full"></a>
                </div>
            </div>
        </div>
    </nav>

    <div class="max-w-4xl mx-auto">
        <!-- 个人资料头部 -->
        <div class="bg-white custom-shadow">
            <!-- 封面图 -->
            <div class="h-48 bg-gradient-to-r from-blue-500 to-purple-500 relative">
                <button class="absolute top-4 right-4 bg-black/50 text-white p-2 rounded-full hover:bg-black/70 transition-colors">
                    <i class="fas fa-camera"></i>
                </button>
            </div>
            
            <!-- 个人信息 -->
            <div class="px-6 pb-6">
                <div class="flex items-end justify-between -mt-16 mb-4">
                    <div class="relative">
                        <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150&h=150&fit=crop&crop=face" 
                             alt="头像" class="w-32 h-32 rounded-full border-4 border-white">
                        <button class="absolute bottom-0 right-0 bg-black text-white p-2 rounded-full hover:bg-gray-800 transition-colors">
                            <i class="fas fa-camera text-sm"></i>
                        </button>
                    </div>
                    <div class="flex space-x-2">
                        <button class="border border-gray-300 px-4 py-2 rounded-full hover:bg-gray-50 transition-colors">
                            <i class="fas fa-envelope"></i>
                        </button>
                        <button class="bg-black text-white px-6 py-2 rounded-full hover:bg-gray-800 transition-colors">
                            关注
                        </button>
                    </div>
                </div>
                
                <div class="mb-4">
                    <h1 class="text-2xl font-bold flex items-center space-x-2">
                        <span>张三</span>
                        <i class="fas fa-check-circle text-blue-500"></i>
                    </h1>
                    <p class="text-gray-600">@zhangsan</p>
                </div>
                
                <p class="text-gray-900 mb-4">
                    产品设计师 | 摄影爱好者 | 咖啡成瘾者 ☕<br>
                    专注于用户体验设计和视觉设计<br>
                    📍 北京 | 🌐 zhangsan.design
                </p>
                
                <div class="flex items-center space-x-6 text-gray-600 mb-4">
                    <span><i class="fas fa-map-marker-alt mr-1"></i>北京</span>
                    <span><i class="fas fa-link mr-1"></i>zhangsan.design</span>
                    <span><i class="fas fa-calendar mr-1"></i>2019年3月加入</span>
                </div>
                
                <div class="flex space-x-6">
                    <span><strong class="text-black">1,234</strong> <span class="text-gray-600">正在关注</span></span>
                    <span><strong class="text-black">5,678</strong> <span class="text-gray-600">关注者</span></span>
                </div>
            </div>
        </div>

        <!-- 标签页 -->
        <div class="bg-white custom-shadow mt-1">
            <div class="border-b border-gray-200">
                <nav class="flex">
                    <button class="px-6 py-4 font-medium text-black border-b-2 border-black">推文</button>
                    <button class="px-6 py-4 font-medium text-gray-600 hover:text-black transition-colors">回复</button>
                    <button class="px-6 py-4 font-medium text-gray-600 hover:text-black transition-colors">媒体</button>
                    <button class="px-6 py-4 font-medium text-gray-600 hover:text-black transition-colors">喜欢</button>
                </nav>
            </div>
        </div>

        <!-- 推文列表 -->
        <div class="bg-white custom-shadow mt-1">
            <div class="divide-y divide-gray-200">
                <!-- 推文项 -->
                <div class="p-6 hover:bg-gray-50 transition-colors">
                    <div class="flex space-x-4">
                        <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=48&h=48&fit=crop&crop=face" 
                             alt="头像" class="w-12 h-12 rounded-full">
                        <div class="flex-1">
                            <div class="flex items-center space-x-2 mb-2">
                                <h3 class="font-bold">张三</h3>
                                <i class="fas fa-check-circle text-blue-500"></i>
                                <span class="text-gray-500">@zhangsan</span>
                                <span class="text-gray-500">·</span>
                                <span class="text-gray-500">2小时前</span>
                            </div>
                            <p class="text-gray-900 mb-4">
                                今天完成了一个新的设计项目，用户反馈非常好！感谢团队的支持和配合。
                                设计不仅是美观，更重要的是解决用户的实际问题。#设计 #用户体验
                            </p>
                            <div class="flex items-center justify-between text-gray-500 max-w-md">
                                <button class="flex items-center space-x-2 hover:text-blue-500 transition-colors">
                                    <i class="far fa-comment"></i>
                                    <span>12</span>
                                </button>
                                <button class="flex items-center space-x-2 hover:text-green-500 transition-colors">
                                    <i class="fas fa-retweet"></i>
                                    <span>8</span>
                                </button>
                                <button class="flex items-center space-x-2 hover:text-red-500 transition-colors">
                                    <i class="far fa-heart"></i>
                                    <span>45</span>
                                </button>
                                <button class="flex items-center space-x-2 hover:text-blue-500 transition-colors">
                                    <i class="fas fa-share"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 更多推文... -->
            </div>
        </div>
    </div>
</body>
</html>
